<script setup lang="ts">
import { addServicePackage } from '@/api';
import { useCareLevel } from '@/hooks';
import { useCareStore } from '@/store';
import type { AddService, ServiceTagConfig } from '@/types';
import { message } from 'ant-design-vue';
import { storeToRefs } from 'pinia';
import { isEmpty } from 'radash';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
import ServiceContent from './config-service-content.vue';


const { levels } = storeToRefs(useCareStore());
const base = reactive({
	levelID: '',
	name: '',
	desc: '',
	status: false,
})
const serviceContent = ref<ServiceTagConfig[]>([]);

const router = useRouter();
const formRef = ref();

useCareLevel();

const getServiceContent = (configs: ServiceTagConfig[]) => {
	serviceContent.value = configs;
}

const add = () => {
	formRef.value.validate().then(() => {
		const params: AddService = {
			enable: base.status ? 1 : 0,
			name: base.name,
			desc: base.desc,
		};
		if (!isEmpty(base.levelID)) {
			params.levelID = Number(base.levelID);
			params.packageSettings = serviceContent.value || []
		}
		addServicePackage(params).then((res) => {
			message.success('创建成功');
			router.push(`/care/detail/${res.Data.ID}`);
		})
	})
}

const formRules = {
	name: [
		{
			required: true,
			message: '请输入服务包名称',
		},
	],
	// levelID: [
	// 	{
	// 		required: true,
	// 		message: '请选择照护等级',
	// 	},
	// ],
};

</script>

<template>
	<div class="form-wrap">
		<a-form :rules="formRules" :model="base" ref="formRef">
			<h3>基础信息</h3>
			<a-form-item label="服务包名称" name="name" class="mr20">
				<a-input v-model:value="base.name"></a-input>
			</a-form-item>
			<a-form-item label="服务包描述" name="desc" class="mr20">
				<a-input v-model:value="base.desc"></a-input>
			</a-form-item>
			<a-form-item label="服务包状态" name="status">
				<a-switch v-model:checked="base.status" />
			</a-form-item>
			<h3>服务内容</h3>
			<a-form-item label="照护等级" name="levelID" class="mr20 w-240">
				<a-select :options="levels" v-model:value="base.levelID"></a-select>
			</a-form-item>
		</a-form>
		<ServiceContent v-if="base.levelID" @change="getServiceContent" :level="base.levelID" />
	</div>
	<div class="text-center b-top-#eee bg-white pb20">
		<a-space>
			<a-button type="primary" class="mt20" @click="add">创建服务包</a-button>
			<a-button class="mt20" @click="router.back()">取消</a-button>
		</a-space>
	</div>
</template>
<style scoped></style>
